<template>
    <div class="ani" ref="ani">

    </div>
</template>

<script>
    export default {
        name: "shrinkBar",
        data() {
            return {}
        },
        methods: {
            // 导航条变小
            navShrink() {
                this.$refs.ani.classList.add("addAnimated")
            },
        },
        mounted() {
            this.navShrink()
        }
    }
</script>

<style lang="less">
    .ani {
        height: 40px;
        background-color: #e8332f;
        transition: height .5s ease-in-out .5s;
    }

    .addAnimated {
        height: 10px!important;
    }
</style>
